<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/homePage.css" />
	</head>

	<body>
		<div class="cd-header">
			<img src="img/logo.png" alt="" class="logo_img" />
			<a class="mui-tab-item tiaozhuanzhibo" href="#tabbar-with-chat"><img src="img/zhibo_logo.png" /></a>
		</div>
		<div class="cd_wrap">
			<!--顶部导航-->
			<div class="cd_top_nav">
				<a href="###">头条</a>
				<a href="###">精选</a>
				<a href="###">娱乐</a>
				<a href="###">体育</a>
				<a href="###">军事</a>
				<a href="###">历史</a>
			</div>
			<!--头条-->
			<div class="cd_wrap_state1">
				<!--大图滚动-->
				<div class="cd_wrap_state1_min_wrap">
					<div class="wrap_state1_max_wrap">
						<div class="wrap_state1_max_wrap_page">
							<img src="{{imgsrc1}}" class="wrap_state1_max_wrap_page_img" />
							<p class="wrap_state1_max_wrap_page_text">{{p1}}</p>
						</div>
						<div class="wrap_state1_max_wrap_page">
							<img src="{{imgsrc2}}" class="wrap_state1_max_wrap_page_img" />
							<p class="wrap_state1_max_wrap_page_text">{{p2}}</p>
						</div>
						<div class="wrap_state1_max_wrap_page">
							<img src="{{imgsrc3}}" class="wrap_state1_max_wrap_page_img" />
							<p class="wrap_state1_max_wrap_page_text">{{p3}}</p>
						</div>
						<div class="wrap_state1_max_wrap_page">
							<img src="{{imgsrc4}}" class="wrap_state1_max_wrap_page_img" />
							<p class="wrap_state1_max_wrap_page_text">{{p4}}</p>
						</div>
					</div>
					<div class="wrap_state1_min_wrap_nav">
						<span class="wrap_state1_min_wrap_nav_dian"></span>
						<span class="wrap_state1_min_wrap_nav_dian"></span>
						<span class="wrap_state1_min_wrap_nav_dian"></span>
						<span class="wrap_state1_min_wrap_nav_dian"></span>
					</div>
				</div>
				<!--新闻栏-->
				<div class="cd_wrap_state1_text_page" ng-repeat="aa in objArr">
					<a href="{{aa.url}}">
						<div style="position: relative;">
							<img src="{{aa.imgsrc}}" class="cd_wrap_state1_text_page_img" style="width: 30%;" />
							<p class="cd_wrap_state1_text_page_text" style="font-size:20px;font-family:'微软雅黑';display: inline-block;width:65%;margin: 0;position: absolute;top:0;">{{aa.title}}</p>
							<span style="position: absolute;right: 0;bottom: 0;">{{aa.replyCount}}跟帖</span>
							<hr />
						</div>
					</a>
				</div>
			</div>
			<!--精选-->
			<div class="cd_wrap_state2"></div>
			<!--娱乐-->
			<div class="cd_wrap_state3"></div>
			<!--体育-->
			<div class="cd_wrap_state4"></div>
			<!--军事-->
			<div class="cd_wrap_state5"></div>
			<!--历史-->
			<div class="cd_wrap_state6"></div>
		</div>
		<!--------------------js------------------------>

		<script type="text/javascript-lazy">
			var screenHeight = window.screen.height;
			var screenWidth = window.screen.width;
			var elementHeight = document.body.scrollHeight;
			var cd_wrap = document.querySelector(".cd_wrap");
			var nav_a = document.querySelectorAll(".cd_top_nav>a");
			var cd_wrap_div = document.querySelectorAll(".cd_wrap>div");
			var cd_wrap_state1_min_wrap = document.querySelector(".cd_wrap_state1_min_wrap");
			var wrap_state1_min_wrap_nav_dian = document.querySelector(".wrap_state1_min_wrap_nav_dian");
			//图片div 的数组
			var swiper_img_arr = document.querySelectorAll(".wrap_state1_max_wrap_page");
			var wrap_state1_min_wrap_nav_dian = document.querySelectorAll(".wrap_state1_min_wrap_nav_dian");
			var cd_wrap_state1_text_page_img = document.querySelector(".cd_wrap_state1_text_page_img");
			//跳转直播的a标签
			var tiaozhuanzhibo = document.querySelector(".tiaozhuanzhibo");
			var big_thenX = 0; //开始点击的X坐标 总页面的
			var big_index = 0; //记录当前页面;
			var thenX = 0; //开始点击的X坐标
			var index = 0; //记录当前显示出来的页面;
			for(var i = 1; i < cd_wrap_div.length; i++) {
				cd_wrap_div[i].style.height = screenHeight + "px";
				//设置六个小页面的高度
			}
			//为了overflow 给 第一个总窗口设置高度;
			//			cd_wrap.style.height=screenHeight+"px";
			//给大图滚动的总窗口设置的高度
			cd_wrap_state1_min_wrap.style.height = screenHeight * 0.2854076 + "px";

			//总页面滚动
			cd_wrap.addEventListener("touchstart", bigStart, false);
			cd_wrap.addEventListener("touchend", bigEnd, false);
			nav_a[0].style.color = "rgb(255, 48, 63)";
			nav_a[0].style.fontSize = "20px";
			cd_wrap.addEventListener("touchmove", function() {
					event.preventDefault();
				})
				//第一页的小图滚动
			cd_wrap_state1_min_wrap.addEventListener("touchstart", start, false);
			cd_wrap_state1_min_wrap.addEventListener("touchend", end, false);
			wrap_state1_min_wrap_nav_dian[index].style.backgroundColor = "rgb(169,169,169)";
			//禁止滑动默认事件
			cd_wrap_state1_min_wrap.addEventListener("touchmove", function() {
				event.preventDefault();
			}, false)

			//上方 a 标签点击跳转事件  失败
			for(var i = 0; i < nav_a.length; i++) {
				nav_a[i].index = i;
				nav_a[i].addEventListener("touchstart", top_a_tiaohzuan_page, true);
			}

			//跳转直播的点击事件
			tiaozhuanzhibo.addEventListener("touchstart", function() {
				document.querySelectorAll(".mui-tab-item")[0].className = "mui-tab-item"
				document.querySelectorAll(".mui-tab-item")[1].className = "mui-tab-item mui-active";
			}, false)

			//封装的方法
			function top_a_tiaohzuan_page() {
				console.log(cd_wrap_div[this.index-1].offsetLeft,cd_wrap_div[this.index-1]);
				for(var j = 0; j < cd_wrap_div.length; j++) {
					cd_wrap_div[j].style.left = cd_wrap_div[j].offsetLeft - cd_wrap_div[this.index + 1].offsetLeft + "px";
					this.removeEventListener("touchstart", top_a_tiaohzuan_page, false);
					setTimeout(function() {
						this.addEventListener("touchstart", top_a_tiaohzuan_page, false);
					}, 1000);
				}
				for(var i = 0; i < nav_a.length; i++) {
							nav_a[i].style.color = "rgb(169,169,169)";
							nav_a[i].style.fontSize = "15px";
						}
						nav_a[this.index].style.color = "rgb(255, 48, 63)";
						nav_a[this.index].style.fontSize = "20px";
			}

			function bigStart(ev) {
				var event = ev || window.event;
				big_thenX = event.changedTouches[0].pageX;
			}

			function bigEnd(ev) {
				var event = ev || window.event;
				var nowX = event.changedTouches[0].pageX;
				if(nowX > big_thenX) {
					if(cd_wrap_div[1].offsetLeft >= 0) {
						console.log("到头了1");
					} else {
						for(var i = 0; i < cd_wrap_div.length; i++) {
							Scroll(cd_wrap_div[i], false);
						}
						big_index--;
						for(var i = 0; i < nav_a.length; i++) {
							nav_a[i].style.color = "rgb(169,169,169)";
							nav_a[i].style.fontSize = "15px";
						}
						nav_a[big_index].style.color = "rgb(255, 48, 63)";
						nav_a[big_index].style.fontSize = "20px";
					}
				} else if(nowX < big_thenX) {
					if(cd_wrap_div[6].offsetLeft > 0) {
						for(var i = 0; i < cd_wrap_div.length; i++) {
							Scroll(cd_wrap_div[i], true);
						}
						big_index++;
						for(var i = 0; i < nav_a.length; i++) {
							nav_a[i].style.color = "rgb(169,169,169)";
							nav_a[i].style.fontSize = "15px";
						}
						nav_a[big_index].style.color = "rgb(255, 48, 63)";
						nav_a[big_index].style.fontSize = "20px";
					} else {
						console.log("到头了2");
					}
				}
				cd_wrap.removeEventListener("touchstart", bigStart, false);
				cd_wrap.removeEventListener("touchend", bigEnd, false);
				setTimeout(function() {
					cd_wrap.addEventListener("touchstart", bigStart, false);
					cd_wrap.addEventListener("touchend", bigEnd, false);
				}, 1000);
			}

			function start(e) {　　
				if(!e) var e = e || window.event;
				e.cancelBubble = true;
				if(e.stopPropagation) e.stopPropagation();
				var event = e || window.event;
				thenX = event.changedTouches[0].pageX;
				event.preventDefault();
			}

			function end() {
				if(!e) var e = e || window.event;
				e.cancelBubble = true;
				if(e.stopPropagation) e.stopPropagation();
				var event = e || window.event;
				event.preventDefault();
				var nowX = event.changedTouches[0].pageX;
				if(nowX > thenX) {
					if(swiper_img_arr[0].offsetLeft >= 0) {
						console.log("到头了");
					} else {
						for(var i = 0; i < swiper_img_arr.length; i++) {
							Scroll(swiper_img_arr[i], false);
						}
						index--;
						for(var i = 0; i < wrap_state1_min_wrap_nav_dian.length; i++) {
							wrap_state1_min_wrap_nav_dian[i].style.backgroundColor = "";
						}
						wrap_state1_min_wrap_nav_dian[index].style.backgroundColor = "rgb(169,169,169)";
					}
				} else if(nowX < thenX) {
					if(swiper_img_arr[3].offsetLeft > 0) {
						for(var i = 0; i < swiper_img_arr.length; i++) {
							Scroll(swiper_img_arr[i], true);
						}
						index++;
						for(var i = 0; i < wrap_state1_min_wrap_nav_dian.length; i++) {
							wrap_state1_min_wrap_nav_dian[i].style.backgroundColor = "";
						}
						wrap_state1_min_wrap_nav_dian[index].style.backgroundColor = "rgb(169,169,169)";
					} else {
						console.log("到头了");
					}
				}
				cd_wrap_state1_min_wrap.removeEventListener("touchstart", start, false);
				cd_wrap_state1_min_wrap.removeEventListener("touchend", end, false);
				setTimeout(function() {
					cd_wrap_state1_min_wrap.addEventListener("touchstart", start, false);
					cd_wrap_state1_min_wrap.addEventListener("touchend", end, false);
				}, 1000);
			}

			function Scroll(obj, bol) {
				if(bol) {
					//					//左滑
					obj.style.left = obj.offsetLeft - screenWidth + "px";
				} else {
					//					//右滑
					obj.style.left = obj.offsetLeft + screenWidth + "px";
				}
			}
		</script>
	</body>

</html>